<template>
  <div class="o-input-text">
    <!-- <AutoComplete
      :placeholder="renderOpts.props.placeholder"
      v-model="searchKey"
      :data="singles"
      @on-change="onChange"
      :filter-method="filterMethod"
      :disabled="renderOpts.props.disabled"
      :class="'align-' + align"
      ref="input"
    /> -->
    <!-- @on-change="onChange"
      @on-blur="onBlur"
      @on-focus="onFocus"
      @on-enter="onEnter" -->

    <Select
      v-model="value"
      filterable
      transfer
      multiple
      :placeholder="renderOpts.props.placeholder"
      @on-query-change="onQueryChange"
      @on-change="onChange"
      :disabled="renderOpts.props.disabled"
      :class="'align-' + align"
      ref="search"
    >
      <Option v-for="item in singles" :value="item.value" :key="item.value">{{
        item.label
      }}</Option>
    </Select>
  </div>
</template>
<script lang="ts">
import { T_srv, Tsrv, vue } from '@/services';
import { Input, Select } from 'view-design';

@T_srv.comp
export default class oSearch extends vue {
  // modify by wiz
  public G_compName: string = 'oSearch';

  /**
   * props
   */
  @T_srv.prop() renderOpts: any;

  @T_srv.prop() params: any;

  private value = null;

  private startValue = null;

  private align = 'left';

  private searchKey = '';

  private G_paramsFromComp: 'oBaseGrid' | 'oBaseForm' = null;

  private instance: any = null;

  private field: string = '';

  private list = [];

  private singles = [];

  private condition = '=';

  private type = 'string';

  private renderType = 'string';

  private input: any = null;

  /**
   * data
   */
  @T_srv.watch('params')
  onParamsChange(val) {
    this.initProps();
    this.setValue();
  }

  created() {
    this.init();
    this.getList();
  }

  mounted() {
    this.initProps();
    this.input = (this.$refs.search as Select).$children[0] as Input;
  }

  private init() {
    if (
      !Tsrv.utils.noValue(this.params) &&
      Object.prototype.hasOwnProperty.call(this.params, 'property')
    ) {
      this.G_paramsFromComp = 'oBaseForm';
      this.field = this.params.property;
    } else {
      this.G_paramsFromComp = 'oBaseGrid';
      this.field = this.params.column.property;
    }

    if (
      !Tsrv.utils.noValue(this.params) &&
      typeof this.renderOpts.props?.getTcommand === 'function'
    ) {
      this.instance = this.renderOpts.props.getTcommand();
    }

    const { column } = this.params;
    const info = this.getColumnType(column);
    if (info.name) {
      if (info.name === 'oDatePicker' || info.name === 'oNumberInput') {
        this.condition = '=';
      } else {
        this.condition = 'custom';
      }
      this.type = info.type;
      this.renderType = info.renderType;
    }
  }

  private getList() {
    const reqParama = {
      currentPage: 1,
      pageSize: 3000,
      filter: {}
    };
    this.instance
      .loadFilterList(this.field, reqParama)
      .then(data => {
        // this.pageTotal = data?.pageTotal ?? 0;
        const list = data?.list;
        if (Tsrv.utils.isArray(list)) {
          this.list = list;
          this.list.forEach(e => {
            // m2o|
            const inputType =
              e.virtualField.indexOf('slc|') > -1
                ? 'select'
                : e.virtualField.indexOf('m2o|') > -1
                ? 'oM2oSelector'
                : 'input';
            // value值为空的情况下
            if (Tsrv.utils.noValue(e.value) && inputType === 'select') {
              e.value = 0;
            }
            // const v: any = e.virtualValue ? e.virtualValue : e.value;
            let label: any;
            if (e.virtualValue) {
              if (inputType === 'select') {
                label = Tsrv.getI18nBySrv(e.virtualValue);
              } else {
                label = e.virtualValue;
              }
            } else {
              label = e.value;
            }
            this.singles.push({
              // label: `${v}`,
              // value: v,
              label: `${label}`,
              value: !Tsrv.utils.noValue(e.value) ? e.value : 0,
              // filterField: e.field,
              // filterValue: e.value,
              // isChk: false,
              isShow: true
            });
          });
        }
      })
      .catch(() => {
        // this.loading = false;
      });
  }

  private initProps() {
    if (this.params.property) {
      const items = this.params.$form.items;
      const find = Tsrv.utils.find(
        items,
        el => el.field === this.params.property
      );
      if (find) {
        this.align = find.align || 'left';
      }
    } else {
      this.align = this.params.column.align || 'left';
    }
  }

  // filterMethod(value, option) {
  //   if (this.searchKey === '') {
  //     return this.singles;
  //   } else {
  //     return this.singles.filter(e => {
  //       return Tsrv.getI18nBySrv(e.label).indexOf(this.searchKey) !== -1;
  //     });
  //   }
  // }

  private onQueryChange(e) {
    // if (e === '') {
    //   this.singles.forEach(e => {
    //     e.isShow = true;
    //   });
    // } else {
    //   this.singles.forEach(e => {
    //     if (Tsrv.getI18nBySrv(e.label).indexOf(this.searchKey) !== -1) {
    //       e.isShow = true;
    //     } else {
    //       e.isShow = false;
    //     }
    //   });
    // }
  }

  private onChange(e) {
    // const val = e.target.value;
    const val = e;
    val === '' ? this.setTableValue(null) : this.setTableValue(val);
    this.emitEvent('change');
  }

  private focus() {
    (this.input.$refs.input as HTMLInputElement).focus();
    (this.input.$refs.input as HTMLInputElement).click();
  }

  getValue() {
    return this.params.property
      ? this.params.data[this.params.property]
      : this.params.row[this.params.column.property];
  }

  setTableValue(val: string | null) {
    if (this.params.property) {
      this.params.data[this.params.property] = val === '' ? null : val;
    } else {
      this.params.row[this.params.column.property] = val === '' ? null : val;
    }
  }

  public resetValue() {
    this.setValue(null);
    this.setTableValue(null);
  }

  setValue(val: null | string | undefined = undefined) {
    if (this.params.property) {
      this.value =
        val !== undefined ? val : this.params.data[this.params.property];
    } else if (this.params.column) {
      this.value =
        val !== undefined ? val : this.params.row[this.params.column.property];
    }
  }

  emitEvent(event: string) {
    const ev = this.renderOpts.events;
    // const params = Tsrv.utils.clone(this.params, true);
    // params.from = 'inputtext';
    const params = Tsrv.utils.cloneNoMatchVue(this.params, true);
    params['from'] = 'inputtext';
    for (const action in ev) {
      if (ev[action] && action === `on-${event}`) {
        // ev[action](params);
        ev[action](params, event);
      }
    }
  }

  private getColumnType(column: any): any {
    const res = {
      name: null,
      type: 'string',
      renderType: 'string'
    };
    if (this.renderOpts && this.renderOpts?.originName) {
      res.name = this.renderOpts?.originName;
      if (this.renderOpts.originName === 'oDatePicker') {
        const type = this.renderOpts.props.type;
        res.type = type;
        res.renderType = type;
      } else if (this.renderOpts.originName === 'oNumberInput') {
        res.type = 'number';
        res.renderType = 'number';
      }
    }
    return res;
  }

  beforeDestroy() {}
}
</script>
<style scoped lang="scss">
// .o-input-text {
// }
::v-deep .ivu-select {
  .ivu-select-selection {
    .ivu-tag-text {
      line-height: 24px !important;
    }
    .ivu-tag {
      line-height: 1.5;
    }
  }
}
</style>
